<template>
  <div v-test:xxx.enter="123456">
    <button @click="isShow = !isShow">
      控制进入与离开（从小到大，从大到小）
    </button>
    <transition name="xxx">
      <div class="box" v-if="isShow"></div>
    </transition>

    登陆页
  </div>
</template>
<script>
import { homeCategoryHead } from '@/api/test.js'
import { ref } from 'vue'
export default {
  directives: {
    test: {
      created (dom, obj) {
        console.log('指令:', dom, obj)
      }
    }
  },
  setup () {
    homeCategoryHead().then(res => {
      console.log('api测试：', res)
    })
    // 动画处理
    const isShow = ref(true)
    return { isShow }
  }
}
</script>
<style lang="less" scoped>
// @代表src,只在html与js中有效，css中无效   css中  ~@代表src
// @import url(~@/assets/styles/variables.less);
// @import url(~@/assets/styles/mixins.less);

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 0 auto;
}
.xxx-enter-active,
.xxx-leave-active {
  transition: all 0.5s;
}
.xxx-enter-from,
.xxx-leave-to {
  opacity: 0;
  width: 0;
  height: 0;
}
</style>
